
  <script setup>
  import { ref , onMounted} from 'vue'
  import { queryPageApi , addApi, queryByIdApi, updateApi , deleteApi} from '@/api/dept'
  import { ElMessage ,ElMessageBox} from 'element-plus'
  
  // 查询参数
  const queryParams = ref({
    name: '',
    status: '',
    page: 1,
    pageSize: 10
  })
  
  // 表格数据
  const deptList = ref([])
  const total = ref(0)
  
  // 搜索
  const search = async () => {
    const result = await queryPageApi(queryParams.value);
    if (result.code == 1) {
      deptList.value = result.data.rows
      total.value = result.data.total
    } 
  }
  
  // 清空
  const clear = () => {
    queryParams.value ={
    name: '',
    status: '',
    page: 1,
    pageSize: 10
  }
  search()
  }

  // 初始化
  onMounted(() => {
    search()
  })
  
  // 分页大小改变
  const handleSizeChange = (val) => {
    search()
  }
  
  // 页码改变
  const handleCurrentChange = (val) => {
    search()
  }


  const formTitle = ref("")
  const dialogFormVisible = ref(false)
  const formLabelWidth = '100px'

  // 弹框显示数据
  const dept = ref({
    name:'',
    status:''
  })
  // 添加部门
  const handleAdd = () => { 
    dialogFormVisible.value = true
    formTitle.value = "添加部门"
    dept.value = {name:'',status:''}

    if(deptFormRef.value){
      deptFormRef.value.resetFields()
    }
  }
  // 保存部门
  const save = () => { 
    deptFormRef.value.validate(async (valid) => { 
      let result
      if(valid){
        if(dept.value.id){ // 修改
          result = await updateApi(dept.value)
        }else{  // 添加
          result = await addApi(dept.value)
        }
        
        if(result.code == 1){
          ElMessage.success('添加成功')
          dialogFormVisible.value = false
          search()
        }else{
          ElMessage.error('添加失败')
        }
      }else{
        ElMessage.error('请填写正确的数据')
      }
    });
  }
  //数据校验
  const deptFormRef = ref(null)
  //弹框数据校验
  const rules = ref({
    name: [
    { required: true, message: '部门名称不能为空', trigger: 'blur' },
    { min: 2, max: 10, message: '长度应在 2 - 10 字符之间', trigger: 'blur' },
  ],
  status: [
    { required: true, message: '部门状态不能为空', trigger: 'blur' },
  ]
  });

  //根据Id查询回显
  const handleEdit = async(id) => {
      const result = await queryByIdApi(id)
      if(result.code == 1){
        dialogFormVisible.value = true
        formTitle.value = "修改部门"
        dept.value = result.data
        if(deptFormRef.value){
          deptFormRef.value.resetFields()
        }
      }else{
        ElMessage.error('数据获取失败')
      }
  };

  //删除部门
  const handleDelete =(id) => {
      ElMessageBox.confirm('您确认要删除该部门吗','提示',{confirmButtonText: '确定', cancelButtonText: '取消',type: 'warning',} )
      .then(async () => {
        const result = await deleteApi(id)
        if(result.code){
          ElMessage.success('删除成功')
          search()
        }
      })
      .catch(() => {
        ElMessage.info('已取消删除!')
        }
      )
  };
  </script>
  <template>
    <div class="department">
      
      <!-- 搜索区域 -->
      <el-form :inline="true" :model="queryParams" ref="queryForm" class="search-form">
        <el-form-item label="部门名称">
          <el-input v-model="queryParams.name" placeholder="请输入部门名称"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 100%">
            <el-option label="正常" :value="1" />
            <el-option label="停用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item class="search-buttons">
          <el-button type="primary" @click="search"><el-icon><Search /></el-icon>搜索</el-button>
          <el-button @click="clear"><el-icon><Refresh /></el-icon>清空</el-button>
        </el-form-item>
      </el-form>
      
      <!-- 操作按钮区域 -->
      <div class="operation-area">
        <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>添加部门</el-button>
      </div>
  
      <!-- 表格区域 -->
      <el-table  :data="deptList"  style="width: 100%" border>
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column prop="name" label="部门名称" width="350" align="center" />
        <el-table-column prop="status" label="状态" width="350" align="center">
          <template #default="scope">
              {{ scope.row.status === 1 ? '正常' : '停用' }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后修改时间" width="350" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row.id)">
              <el-icon><Edit /></el-icon>修改
            </el-button>
            <el-button type="danger" link @click="handleDelete(scope.row.id)">
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页区域 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- 添加/修改部门对话框 -->
      <el-dialog id="deptDialog" v-model="dialogFormVisible" :title = "formTitle" width="450" type="primary" center >
      <el-form :model="dept" :rules="rules" ref="deptFormRef">
      <el-form-item label="部门名称: " :label-width="formLabelWidth" prop="name" >
        <el-input v-model="dept.name" autocomplete="off" placeholder="请输入部门名称"/>
      </el-form-item>

      <el-form-item label="部门状态: " :label-width="formLabelWidth" prop="status">
        <el-select v-model="dept.status" placeholder="请选择">
          <el-option label="正常" :value="1" />
          <el-option label="停用" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save" >确认</el-button>
        <el-button type="info" @click="dialogFormVisible = false" >取消</el-button>
      </div>
    </template>

    </el-dialog>

    </div>
  </template>
  
  <style scoped>
  .department {
    padding: 20px;
    background-color: #fff;
    min-height: 100%;
    border-radius: 8px; /* 添加圆角 */
  }
  
  .operation-area {
    margin: 20px 0;
  }
  
  .search-form {
    display: flex;
    align-items: center;
  }
  
  .search-form :deep(.el-form-item) {
    margin-right: 20px;
    min-width: 280px;
  }
  
  .search-buttons {
    margin-left: auto !important;
    min-width: auto !important;
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  
  .divider {
    height: 0.5px;
    background-color: #dcdfe6;
    margin: 10px 0;
    width: 100%;
  }
  
  :deep(.dept-dialog .el-dialog__body) {
    padding-top: 30px;
  }
  
  .dept-form {
    width: 80%;
    margin: 0 auto;
  }
  
  :deep(.el-button .el-icon) {
    margin-right: 4px;
  }

  :deep(.el-dialog__header .el-dialog__title) {
  color: #409EFF; /* 修改为你想要的颜色 */
  }

  </style>